<script>
	import Top from '@/components/Top.vue';
	import FirstScreen from '@/components/FirstScreen.vue';
	import axios from "axios";
	
	export default {
		data() {
			return {
				movies: [],
				teleplays: []
			}
		},
		mounted() {
			this.movieList();
			this.teleplayList();
		},
		methods: {
			movieList() {
				let movies= this.movies;
				movies.length=0;
				let data={
					types: ["MOVIE"],
					origins: ["VIDEO"]
				}
				axios.post('/api/video/user/tagVideoList', data)
				        .then(function(response){
							response.data.data.records.forEach((key) => {
								key.url="/page/DetailPage/"+key.id;
								movies.push(key);
							})
						})
				        .catch(function(error) {
							// 请求失败处理
							  console.log(error);
				        });
			},
			teleplayList() {
				let teleplays= this.teleplays;
				teleplays.length=0;
				let data={
					types: ["TELEPLAY"],
					origins: ["VIDEO"]
				}
				axios.post('/api/video/user/tagVideoList', data)
				        .then(function(response){
							response.data.data.records.forEach((key) => {
								key.url="/page/DetailPage/"+key.id;
								teleplays.push(key);
							})
						})
				        .catch(function(error) {
							// 请求失败处理
							  console.log(error);
				        });
			}
		}
	}
</script>

<template>
	<Top/>
	<FirstScreen/>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span class="text">电影</span>
		</div>
		<div v-for="data in movies" :key="data" class="text item">
			<router-link :to="data.url">
				<el-image calss="item" :src="data.image" fit="fill"></el-image>
				<span style="width: 300px;font-size: 20px;" :innerText="data.name"></span>
			</router-link>
		</div>
	</el-card>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span class="text">电视剧</span>
		</div>
		<div v-for="data in teleplays" :key="data" class="text item">
			<router-link :to="data.url">
				<el-image calss="item" :src="data.image" fit="fill"></el-image>
				<span style="width: 300px;font-size: 20px;" :innerText="data.name"></span>
			</router-link>
		</div>
	</el-card>
</template>

<style>
	.text {
		font-size: 32px;
	}
	
	.item {
		float: inline-start;
		margin: 20px;
		width: 300px;
		height: 300px;
	}
	
	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}
	
	.clearfix:after {
		clear: both
	}
	
	.box-card {
		margin: 10px;
	}
</style>